
@import "../comment/init";

$authWrapperWidth:400px;
$authWrapperHeight:500px;

body{
  overflow-y: scroll;
  .mask-wrapper{
    width:1853px;
    height:1000px;
    position: fixed;
    left:0;
    top:0;
    display: none;
    z-index: 100;
    overflow: hidden;
    background: rgba(56,62,68,.9);
    .auth-wrapper{
      width:$authWrapperWidth;
      margin:40px auto;
      position: absolute;
      left:50%;
      top:50%;
      margin-left: -315px;
      margin-top: -395px;
      .close-wrapper{
        background: #fff;
        height:40px;
        width:$authWrapperWidth;
        .close-btn{
          float: right;
          margin-top: 10px;
          margin-right:10px;
          font-size: 18px;
          color: #ccc;
        }
      }
      .auth-inner-wrapper{
        width:100%;
        height:$authWrapperHeight;
        overflow: hidden;
        position: relative;
        .scroll-wrapper{
          width:$authWrapperWidth * 2;
          position: absolute;
          left:0;
          right: 0;
          top:0;
          //background: #fff;
          .auth-group{
            width:$authWrapperWidth;
            padding:0 20px 20px 20px;
            box-sizing: border-box;
            font-size: 18px;
            overflow: hidden;
            .top-group{
              height:35px;
              width: 100%;
              border-bottom: 1px solid #ccc;
              line-height: 35px;
              padding-bottom: 10px;
              .title{
                float: left;
                border-bottom: 4px solid #5C87D9;
                padding-bottom: 6px;
              }
              .switch{
                float: right;
                color: #878787;
              }
            }
            .form-group{
              margin-top: 20px;
              .input-group{
                margin-bottom: 20px;
                height: 40px;
                .form-control{
                  height:40px;
                  width: 100%;
                  outline: none;
                }
                .remember-label{
                  font-size: 14px;
                  height: 40px;
                }
                .submit-btn{
                  width:100%;
                  height: 100%;
                  background: #7ed321;
                  font-size: 18px;
                  color: #fff;
                  border-radius: 5px;
                  border: none;
                  cursor: pointer;
                  margin-bottom: 20px;
                }
                .short-input-group{
                  height: 35px;
                  width:200px;
                  float: left;
                  .img-captcha{
                    height:100%;
                    width:100%;
                  }
                }
                .input-group-addon{
                  float: left;
                  height: 40px;
                  width:140px;
                  margin-left:20px;
                  img{
                    height:100%;
                    width:100%;
                    cursor: pointer;
                  }
                  .sms-captcha-btn{
                    line-height: 40px;
                    background: #555e67;
                    padding:8px 10px;
                    border-radius: 3px;
                    cursor: pointer;
                  }
                  .disabled{
                    color: #ccc;
                    border-color: #ccc;
                  }
                }
              }
            }
          }
          .signin-group{
            float: left;
            background: #fff;
          }
          .signup-group{
            float: left;
            background: #fff;
          }

        }
      }
    }
  }
}